<script setup lang="ts">
import NewsComment from "@/components/NewsComment.vue";
import {useStore} from "vuex";
import {onMounted, ref} from "vue";
import { useRoute } from 'vue-router';
import router from "@/router";
useRoute();
const store = useStore()

let postList = ref([])
let postListDay = ref([])
const postByLike = () => {
  store.dispatch('postByLike').then((res:any) => {
    console.log(res)
    if(res === 200) {
      postList.value = store.state.postList
    }
  })
}
const dayPostList = () => {
  store.dispatch('postByDay').then((res:any) => {
    console.log(res)
    if(res === 200) {
      postListDay.value = store.state.postListDay
      console.log(postListDay.value)
    }
  })
}

const goDetail = (postId: number) => {
  router.push({name: 'detail', query: {id: postId}})
}

onMounted(() => {
  postByLike()
  dayPostList()
})

</script>

<template>
  <div style="display: flex; justify-content: center">
    <div style="display: flex;flex-direction: column; justify-content: center; align-items: center">
      <NewsComment :posts="postList"></NewsComment>
    </div>
    <div style="margin-top: 16px; margin-left: 20px">
      <el-card style="max-width: 480px;" >
        <template #header>
          <div class="card-header">
            <i class="icon-fire"></i><span style="margin-left: 4px">热点排行</span>
          </div>
        </template>
        <div style="width:300px;display: flex; justify-content: space-between" v-for="(item, index) in postListDay" :key="index" @click="goDetail(item.postId)">
          <div style="display: flex;justify-content: center; align-items: center">
            <span style="font-size: 18px;margin-right: 6px" :class="{ 'highlighted-rank': index < 3 }">{{index + 1}}</span>
            <span style="width: 60px;overflow: hidden;text-overflow:ellipsis;white-space:nowrap;">{{item.title}}</span>
          </div>
          <div>
            <i class="icon-fire"><span style="margin-left: 6px">{{item.likeCount}}</span></i>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<style scoped>
/* 假设你的CSS文件或者<style>标签内 */
.highlighted-rank {
  color: red; /* 或者你想要的任何颜色 */
}
</style>